<template>
  <div style="z-index: 1" class="container">
    <a-image
        width="200"
        :src="url"
        :showLoader="true"
    />
    <el-table :data="dataList" style="width: 100%" stripe :table-layout="tableLayout" highlight-current-row
              :show-header="false" class="tableel">
      <el-table-column label="index" width="60" type="index">
      </el-table-column>
      <el-table-column prop="name"/>
      <el-table-column prop="ar[0].name" align="right"/>
    </el-table>
  </div>

</template>

<script setup>
import {ref, watch, nextTick} from 'vue'

const tableLayout = ref('fixed')

const props = defineProps(['dataList', 'src'])
const dataList = ref([])
watch(() => props.dataList, (newvalue, oldValue) => {
  dataList.value = newvalue
})
const url = ref('')
watch(() => props.src, (newvalue, oldValue) => {
  url.value = newvalue
})

</script>

<style scoped>
:deep(.el-table__row--striped) {
  z-index: 1;
}

.container {
  display: flex;
}
</style>